<template>
    <div class="do">
        <div class="title">
            <span><slot></slot></span>
            <van-icon name="add-o" size="30" color="gray" />
        </div>
        <van-divider class="margin"/>

        <div class="like" @click="$router.push({name:'detail',params:{id:item.id}})"  v-for="(item, index) in playlist" :key="index">
            <van-image class="img" width="4rem" height="4rem" fit="cover" :src="item.coverImgUrl" />
            <div class="likename">
                <span>{{item.name}}</span>
                <span style="color:gray">{{item.trackCount}}首</span> 
            </div>
            <van-icon name="more-o" size="30" color="gray"/>
            <!-- <span style="padding-bottom:5%"></span> -->
        </div>
        

    </div>
</template>

<script>
export default {
  data() {
    return {
     
    };
  },
  props:{
      playlist:{
          default:[]
      }
  }
};
</script>

<style scoped>
.do{
  /* border: 1px solid #000; */
  margin: 5%;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 0 10px 0.5px #33333333;
}
.title{
  height:50px; 
  align-items:flex-end;
  display:flex;
  justify-content:space-between;
  margin-right: 8.5%;
}
.title span{
  margin-left: 25px;
  font-size: 16px;
}
.margin{
  margin-left: 25px;
  margin-right: 25px;
  margin-bottom: 0px;
}
.like{
    /* border: 1px solid #000; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5%;
    background: #fff;
    border-radius: 15px;
    /* box-shadow: 0 0 10px 0.5px #33333333; */
}
.likename{
    /* border: 1px solid #000; */
    width: 63%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: left;
    /* margin-right: 20%; */
    margin-left: 5%;
}
div:last-child
{ 
/* background:#ff0000; */
padding-bottom: 7%;
}
</style>